<template>
  <div v-if="skin_data && skin_data.length > 0">
    <div class="show_skin_div" >
    <!-- 时装展示部分 -->
    <!-- 皮肤详情 -->
    <!-- {{skin_data}} -->
    <div class="item_skin" v-for="(item,index) of skin_data" :key="index">
      <template v-if="item">
         <!-- 皮肤背景 -->
        <div class="skin_back">
          <img :src="getImgPath + 'img/card/card-bg1.png'" v-if="jinOrzi(item.skin_leave)">
          <img :src="getImgPath + 'img/card/card-bg2.png'" v-if="!jinOrzi(item.skin_leave)">
        </div>
        <!-- 皮肤图片 -->
        <div class="skin_img">
          <img :src="getImgPath + item.skin_path + '.png'">
        </div>
        <!-- 皮肤名字遮罩部分 -->
        <div class="skin_name_warp">
          <img :src="getImgPath + 'img/card/card-text1.png'" v-if="jinOrzi(item.skin_leave)">
          <img :src="getImgPath + 'img/card/card-text2.png'" v-if="!jinOrzi(item.skin_leave)">
        </div>
        <!-- 皮肤名字部分 -->
        <span class="skin_name">
          <p class="font_jin" v-if="jinOrzi(item.skin_leave)">{{item.skin_name}}</p>
          <p class="font_zi" v-if="!jinOrzi(item.skin_leave)">{{item.skin_name}}</p>
        </span>
        <!-- 皮肤 标致部分 -->
        <div class="biao" :class="skinTag(item.skin_leave)">
          <div class="biao_img"></div>
        </div>
      </template>
    </div>
    </div>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
export default {
  name:"ShowSkin",
  props:["skin_data"],
  computed: {
    ...mapGetters("ImgPath",{
      getImgPath:"getImgPath"
    }),
    // 金 or 紫
    jinOrzi(){
      return (skin_leave) => {
        if(skin_leave <= 6) return true;
        return false;
      }
    },
    // 皮肤 tag
    skinTag(){
      return (tag_name) => {
        switch(tag_name){
          case 1:
          case 7:
              return "limt"
              break;
          case 2:
          case 8:
              return "coa"
              break;
          case 3:
          case 9:
              return "danwan"
              break;
          case 4:
          case 10:
              return "p5"
              break;
          case 5:
          case 11:
              return "yitenruner"
              break;
          case 6:
          case 16:
              return ""
              break;
          case 12:
              return "aidehua"
              break;
          case 13:
              return "movie"
              break;
          case 14:
              return "path"
              break;
          case 15:
              return "public"
              break;
          default:
              return ""
              break;
        }
      }
    }
  },
}
</script>
<style lang="less" scoped>
  .show_skin_div{
    width: 103%;
    padding-top: 0.07rem;
  }

  .skin_back{
    width: 100%;
    img{
      width: 100%;
    }
  }

  .item_skin{
    position: relative;
    display: inline-block;
    width: 16.75%;
    margin: 0rem 0.04rem;
  }
  .skin_img{
    position: absolute;
    top: 0.05rem;
    width: 100%;
    img{
      width: 100%;
    }
  }

  .skin_name_warp{
    position: absolute;
    width: 100%;
    height: 0.3rem;
    left: 0.01rem;
    bottom: 0rem;
    img{
      position: absolute;
      width: 100%;
    }
  }
  .skin_name{
    position: absolute;
    bottom: 0.09rem;
    width: 100%;
    margin: 0 auto;
    p{
      text-align: center;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.12rem;
    }
  }

  .font_jin{
    color: #DEC363;
  }

  .font_zi{
    color: #2E1922;
  }

  .biao{
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    top: -0.07rem;
    right: -0.07rem;
  }

  .biao_img{
    width: 100%;
    height: 100%;
    background-position: center;
  }


  // 皮肤标签样式部分
  .limt{
    right: -0.3rem;
    .biao_img{
      background: url("../../../assets/img/home/tag_limit.png") no-repeat;
      background-size: 70%;
    }
  }

  .coa{
    right: -0.2rem;
    top: -0.16rem;
    .biao_img{
      background: url("../../../assets/img/home/tag_limit_coa_3.png");
      background-size: 110%;
    }
  }

  .danwan{
    top: -0.1rem;
    right: -0.25rem;
    .biao_img{
      background: url("../../../assets/img/home/tag_limit_danwan.png");
      background-size: 100%;
    }
  }

  .aidehua{
    right: -0.27rem;
    .biao_img{
      background: url("../../../assets/img/home/tag_limit_edward.png");
      background-size: 100%;
    }
  }
  
  .yitenruner{
    right: -0.2rem;
    .biao_img{
      background: url("../../../assets/img/home/tag_limit_itou_junji.png");
      background-size: 100%;
    }
  }

  .movie{
    right: -0.23rem;
    .biao_img{
      background: url("../../../assets/img/home/tag_limit_movie.png");
      background-size: 100%;
    }
  }

  .p5{
    right: -0.23rem;
    .biao_img{
      background: url("../../../assets/img/home/tag_limit_p5.png");
      background-size: 100%;
    }
  }

  .path{
    right: -0.2rem;
    .biao_img{
      background: url("../../../assets/img/home/tag_limit_path.png");
      background-size: 100%;
    }
  }


  .public{
    right: -0.24rem;
    .biao_img{
      background: url("../../../assets/img/home/tag_limit_publicbnf.png");
      background-size: 100%;
    }
  }
</style>